기술 면접 2탄

1. Promise 에 대한 개념을 설명해주세요.#

프로미스란 ?#

프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다.

자바스크립트 비동기 처리#

자바스크립트는 싱글스레드 언어 이고 기본적으로 동기적으로 코드를 처리합니다. 이렇게 되면 클라이언트에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지도 모르는데 , 마냥 다른 코드를 실행 안하고 기다리게 됩니다. 이러한 문제점을 해결하기 위한 것이 비동기 처리인데요, 비동기 처리는 특정 코드의 실행이 완료될 때까지 기다리지 않고, 다음 코드를 수행 하는 것 입니다. 즉 요청을 보낸 후 응답에 관계없이 다음 동작을 실행한다.

동기와 비동기의 차이점
동기 : 요청을 보낸 후 해당 응답을 받아야 다음 동작을 실행함
비동기 : 요청을 보낸 후 응답에 관계없이 다음 동작을 실행함

자바스크립트 비동기 처리의 문제점#

자바스크립트 비동기 처리의 가능 흔한 사례는 jquery의 ajax와 Web API의 setTimeout() 이다. 이러한 비동기 처리 방식에는 문제점이 있다.

비동기 특성상 특정 코드의 실행이 완료될 때까지 기다리지 않고, 다음 코드를 수행하는 것인데, 그렇게 되면 클라이언트가 서버에 데이터를 요청했는데, 그 데이터가 다 오기도 전에 화면을 나타내서 화면에 아무것도 표시가 되지 않는다.

이러한 문제를 해결 하는 방법은 콜백함수 Promise async await 이다.

프로미스의 3가지 상태#

프로미스를 사용할 때 알아야 하는 가장 기본적인 개념이 바로 프로미스의 상태이다. 여기서 말하는 상태란 프로미스의 처리 과정을 의미한다. new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖는다.

Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 상태
Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태

Pending(대기)#

먼저 아래와 같이 new Promise() 메서드를 호출하면 대기(Pending) 상태가 된다.

new Promise();

new Promise() 메서드를 호출할 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject 이다.

new Promise(function (resolve, reject) {  // ...});

Fulfilled(이행)#

여기서 콜백 함수의 인자 resolve를 아래와 같이 실행하면 이행(Fulfilled) 상태가 된다.

new Promise(function (resolve, reject) {  resolve();});

그리고 이행 상태가 되면 아래와 같이 then()을 이용하여 처리 결과 값을 받을 수 있다.

function getData() {  return new Promise(function (resolve, reject) {    const data = 100;    resolve(data);  });}
// resolve() 의 결과 값 data를 resolvedData로 받음getData().then(function (resolvedData) {  console.log(resolvedData); // 100});

Rejected(실패)#

new Promise()로 프로미스 객체를 생성하면 콜백 함수 인자로 resolve와 reject를 사용할 수 있다고 했다. 여기서 reject를 아래와 같이 호출하면 실패(Rejected) 상태가 된다.

new Promise(function (resolve, reject) {  reject();});

그리고, 실패 상태가 되면 실패한 이유(실패 처리의 결과 값)를 catch()로 받을 수 있다.

function getData() {  return new Promise(function (resolve, reject) {    reject(new Error('Request is failed'));  });
  // reject()의 결과 값 Error를 err에 받음  getData()    .then()    .catch(function (err) {      console.log(err); // Error: Request is failed    });}

2. HTTP method에 대해서 설명해주세요, 그리고 GET과 POST 차이점을 설명해주세요.#

HTTP method 란 ?#

HTTP는 웹상에서 클라이언트와 서버 간에 요청/응답으로 데이터를 주고 받을 수 있는 프로토콜이다. 클라이언트가 HTTP 프로토컬을 통해 서버에게 요청을 보내면 서버는 요청에 맞는 응답을 클라이언트에게 전송한다. 이때, HTTP 요청에 포함되는 HTTP 메소드는 서버가 요청을 수행하기 위해 해야할 행동을 표시하는 용도로 사용된다.

HTTP method 요청 종류#

GET : 서버로부터 정보를 조회하기 위해 설계된 메소드 이다. GET은 요청을 할 때 데이터를 Body에 담지 않고, 쿼리스트링을 통해 전송한다.
HEAD : GET방식과 동일하지만, 응답에 BODY가 없고 응답 코드와 HEAD만 응답한다.
POST : 신규 리소스의 등록을 위해 설계된 메소드이다. Body를 통해 서버로 요청 데이터를 전달한다.
PUT : 리소스를 전송하여 해당 URL에 리소스를 생성하거나, 기존 리소스를 삭제하도 덮어씌운다.
PATCH : 리소스를 부분적으로 변경한다.
DELETE : 특정 리소스 삭제를 요청하는데 사용한다.
CONNECT : 대장 리소스로 식별되는 서버에 대한 터널을 설정
OPTION : 대상 리소스에 대한 통신을 설정하는데 사용
TRACE : 대상 리소스에 대한 경로를 따라 메세지 루프백 테스트를 수행

POST 와 PUT 의 차이
POST는 보통 INSERT의 개념으로 사용되고, PUT은 UPDATE의 개념으로 사용된다.

PUT 과 PATCH의 차이
PUT은 해당 데이터의 전체를 교체하는 의미를 가졌고, PATCH는 일부만 변경한다는 의미를 가졌다.

GET과 POST의 차이점#

GET 은 데이터를 가져와서 보여줄 때 사용하는 메서드이고, 어떤 값이나, 내용, 상태등을 바꾸지 않는다. 또한 서버에게 동일한 요청을 여러 번 전송하더라도 동일한 응답이 돌아 온다.

POST는 서버상의 데이터를 생성하거나, 상태를 바꾸기 위해서 사용한다. 또한 서버에게 동일한 요청을 여러 번 전송해도 응답은 항상 다를 수 있다.

3. async와 await에 대해서 설명해주세요.#

async & await 이란 ?#

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 해준다.

async & await이 적용된 코드와 그렇지 않은 코드#

user데이터를 불러온 후 user가 존재하면 todo를 불러오는 코드이다.

콜백 함수로 비동기 처리한 코드

const getData = () => {  fetchUser((user, err) => {    if (err) {      console.log(err);      return;    }    if (user.id) {      fetchTodo((todo, err) => {        if (err) {          console.log(err);          return;        }        console.log(todo.title);      });    }  });};

async & await으로 비동기 처리한 코드

const getData = async () => {  try {    const user = await fetchUser();    const todo = await fetchTodo();    console.log(todo.title);  } catch (e) {    console.log(e);  }};

콜백함수에 비해서 async & await으로 작성한 코드가 가독성 면에서 더 좋다. 데이터 요청 부분이 2개 인데도 콜백함수는 읽기 힘든데, 데이터 요청 부분이 많아지면 정말 콜백지옥의 시작이다 ..

async & await 예외 처리#

async & await에서 예외를 처리하는 방법은 바로 try catch이다. 프로미스에서 에러 처리를 위해 .catch()를 사용했던 것처럼 async에서도 try catch의 catch()를 사용하면 된다.

조금 전 async & await 코드의 try catch 문이 예외 처리 문이다.

const getData = async () => {  try {    const user = await fetchUser();    const todo = await fetchTodo();    console.log(todo.title);  } catch (e) {    console.log(e); // user 또는 todo 를 불러오는 와중에 에러가 생기면 catch가 잡아냄  }};